import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    Text
} from 'react-native';
let dimension = require('Dimensions');
let {width, height} = dimension.get('window');
import CommonCell from './BottomCommonCell';
let json = require('../../Data/XMG_Home_D5.json');
export default class HomeShopCenter extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <View style={styles.container}>
                <CommonCell leftIcon={require('../../img/icon_camera_finish_disabled.png')} leftTitle='配送点'
                            rightTitle={json.tips}/>
                <ScrollView style={styles.ScrollViewStyle} horizontal={true} showsHorizontalScrollIndicator={false}>
                    {this.renderAllItem()}
                </ScrollView>
            </View>
        )
    }

    renderAllItem() {
        let itemArr = [];
        let shopData = json.data;
        for (let i = 0; i < shopData.length; i++) {
            var data = shopData[i];
            itemArr.push(
                <ShopCenterItem shopImage={data.img} shopSale={data.showtext.text} detailurl={data.detailurl}
                                shopName={data.name} key={i} popTopShopCenter={(url)=>this.popTopHome(url)}/>
            )
        }
        return itemArr;
    }

    popTopHome(url) {
        if (this.props.popToHomeView == null) return;
        this.props.popToHomeView(url);
    }
}
HomeShopCenter.propTypes = {
    popToHomeView: React.PropTypes.func
};
HomeShopCenter.defaultProps = {
    popToHomeView: null
};


class ShopCenterItem extends Component {
    render() {
        return (
            <TouchableOpacity onPress={()=>this.clickItem(this.props.detailurl)}>
                <View style={styles.itemViewStyle}>
                    <Image source={{uri:this.props.shopImage}} style={styles.imageStyle}/>
                    <Text style={styles.shopSaleStyle}>{this.props.shopSale}</Text>
                    <Text style={styles.shopNameStyle}>{this.props.shopName}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    clickItem(url) {
        if (this.props.detailurl == null) return;
        this.props.popTopShopCenter(url);
    }

}
ShopCenterItem.propTypes = {
    shopImage: React.PropTypes.string,
    shopSale: React.PropTypes.string,
    shopName: React.PropTypes.string,
    detailurl: React.PropTypes.string,
    popTopShopCenter: React.PropTypes.func
};
ShopCenterItem.defaultProps = {
    shopImage: '',
    shopSale: '',
    shopName: '',
    detailurl: '',
    popTopShopCenter: null
};
const styles = StyleSheet.create({
    container: {
        marginTop: 15
    },
    imageStyle: {
        width: 120,
        height: 100,
        borderRadius: 8
    },
    ScrollViewStyle: {
        flexDirection: 'row',
        backgroundColor: 'white',
        padding: 10
    },
    itemViewStyle: {
        margin: 8
    },
    shopSaleStyle: {
        position: 'absolute',
        left: 0,
        bottom: 30,
        backgroundColor: 'red',
        color: 'white',
        padding: 2,

    },
    shopNameStyle: {
        textAlign: 'center',
        marginTop: 5
    }
});
